<template>
  <view class="content">
    <wd-row>
      <wd-col :span="7">
        <view class="content-left">
          <view style="font-size: 26rpx">
            {{ stockIndexData.val }}
            <text
              style="font-size: 16rpx"
              :style="{ color: stockIndexData.volume >= 0 ? 'red' : 'green' }"
            >
              {{
                stockIndexData.volume >= 0
                  ? '+' + stockIndexData.volume.toFixed(2)
                  : stockIndexData.volume.toFixed(2)
              }}
            </text>
          </view>
          <view style="font-size: 20rpx; display: flex; justify-content: left; align-items: center">
            上证指数
            <text
              style="font-size: 24rpx"
              :style="{ color: stockIndexData.rate >= 0 ? 'red' : 'green' }"
            >
              {{ stockIndexData.rate >= 0 ? '+' : '' }}
            </text>
            <wd-count-to
              suffix="%"
              :startVal="0"
              :decimals="2"
              :endVal="stockIndexData.rate.toFixed(2)"
              :fontSize="11"
              :color="stockIndexData.rate >= 0 ? 'red' : 'green'"
            ></wd-count-to>
          </view>
        </view>
      </wd-col>
      <wd-col :span="17">
        <view class="content-right">
          <view class="rihgt-item" style="background-color: #fef2ef; color: red">
            <view>{{ dataList[0].tip }}</view>
            <view>
              <wd-count-to
                suffix="只"
                :startVal="0"
                :decimals="0"
                :endVal="dataList[0].num"
                :fontSize="11"
                :color="'red'"
              ></wd-count-to>
            </view>
          </view>
          <view>+</view>
          <view class="rihgt-item" style="background-color: #edfbe0; color: #00bf00">
            <view>{{ dataList[1].tip }}</view>
            <view>
              <wd-count-to
                suffix="只"
                :startVal="0"
                :decimals="0"
                :endVal="dataList[1].num"
                :fontSize="11"
                :color="'#00bf00'"
              ></wd-count-to>
            </view>
          </view>
          <view>+</view>
          <view class="rihgt-item" style="background-color: #f6f8fb; color: #6f717a">
            <view>{{ dataList[2].tip }}</view>
            <view>
              <wd-count-to
                suffix="只"
                :startVal="0"
                :decimals="0"
                :endVal="dataList[2].num"
                :fontSize="11"
                :color="'6f717a'"
              ></wd-count-to>
            </view>
          </view>
          <view>=</view>
          <view class="rihgt-item" style="background-color: #f6f8fb; color: #6f717a">
            <view>{{ dataList[3].tip }}</view>
            <view>
              <wd-count-to
                suffix="只"
                :startVal="0"
                :decimals="0"
                :endVal="dataList[3].num"
                :fontSize="11"
                :color="'#6f717a'"
              ></wd-count-to>
            </view>
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<script lang="ts" setup>
import { http } from '@/utils/http'
// 数据统计
const dataList = ref([
  { tip: '加仓区', num: 0 },
  { tip: '减仓区', num: 0 },
  { tip: '观望区', num: 0 },
  { tip: '累计自选', num: 0 },
])
// 大盘行情数据
const stockIndexData = ref<any>({})
// 加载统计提示
const loadData = () => {
  http.get('/sys/fund/optional/tipCount').then((res: any) => {
    if (res.success) {
      // 结果集
      const result = res.result
      let total = 0
      dataList.value.forEach((item) => {
        const data = result.find((rs) => rs.tip === item.tip)
        if (data !== undefined) {
          item.num = data.num
          total += data.num
        }
      })
      // 总数赋值
      dataList.value[3].num = total
    }
  })
}

/**
 * 加载上证指数
 */
const loadIndexData = () => {
  http.get('/sys/stock/index/detail', { id: '000001' }).then((res: any) => {
    if (res.success) {
      stockIndexData.value = res.result
    }
  })
}

onLoad(() => {
  loadData()
  loadIndexData()
})
</script>

<style lang="scss" scoped>
.content {
  width: 95%;
  margin: 0 auto;
  font-size: 20rpx;
  .content-left {
    padding: 8rpx;
    text-align: left;
    border-radius: 10rpx;
  }
  .content-right {
    display: flex;
    align-items: center;
    .rihgt-item {
      padding: 12rpx 0rpx;
      flex: 1;
      text-align: center;
      border-radius: 10rpx;
      margin: 0px 4rpx;
    }
  }
}
</style>
